<template>
  <GenericImportWizard
    v-model="visible"
    title="导入客户"
    :field-mapping-config="fieldConfig"
    :import-instructions="importInstructions"
    template-file-name="客户导入模板.csv"
    @import-success="handleImportSuccess"
    @file-selected="handleFileSelected"
    @field-mapped="handleFieldMapped"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import GenericImportWizard from '@/components/import-wizard/GenericImportWizard.vue'

const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'import-success'): void
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (val: boolean) => emit('update:modelValue', val)
})

// 字段配置
const fieldConfig = [
  { key: 'name', label: '客户名称', width: 120 },
  { key: 'code', label: '客户编码', width: 120 },
  { key: 'contactPerson', label: '联系人' },
  { key: 'phone', label: '联系电话' }
]

// 导入说明
const importInstructions = [
  '支持Excel和CSV格式的客户数据文件',
  '文件大小不超过10MB',
  '建议包含客户名称、联系人、电话等基本信息',
  '系统将自动检测文件中的列名'
]

// 处理导入成功
const handleImportSuccess = () => {
  ElMessage.success('客户数据导入成功')
  emit('import-success')
}

// 处理文件选择
const handleFileSelected = (file: File) => {
  console.log('Selected file:', file.name)
}

// 处理字段映射
const handleFieldMapped = (mapping: Record<string, string>) => {
  console.log('Field mapping:', mapping)
}
</script>

<style scoped lang="scss">
.step-content {
  margin: 30px 0;
  min-height: 300px;
}

.step-pane {
  padding: 20px 0;
}

.import-info {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  
  h4 {
    margin-top: 0;
    color: #1f2d3d;
  }
  
  ul {
    padding-left: 20px;
    margin: 10px 0;
    
    li {
      margin-bottom: 8px;
      color: #606266;
    }
  }
}

.import-summary {
  width: 100%;
}
</style>